<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        <companys-search/>
        <template>
          <el-tabs v-model="activeName" type="card" @tab-click="handleClickTab">
            <el-tab-pane label="全部" name="first"></el-tab-pane>
            <el-tab-pane label="待审核" name="second"></el-tab-pane>
            <el-tab-pane label="已审核" name="third"></el-tab-pane>
            <el-tab-pane label="已拒绝" name="fourth"></el-tab-pane>
          </el-tabs>
        </template>
        <page-tools :total="total" />
        <template>
          <el-table
            :fit="true"
            :data="questionsData"
            border
          >
            <el-table-column
              width="200px"
              prop="number"
              label="试题编号">
            </el-table-column>
            <el-table-column
              prop="subject"
              label="学科">
            </el-table-column>
            <el-table-column
              prop="catalog"
              label="目录">
            </el-table-column>
            <el-table-column
              :formatter="questionTypeFormatter"
              prop="questionType"
              label="题型">
            </el-table-column>
            <el-table-column
              :formatter="questionFormatter"
              width="300px"
              prop="question"
              label="题干">
            </el-table-column>
            <el-table-column
              :formatter="addDateFormatter"
              width="200px"
              prop="addDate"
              label="录入时间">
            </el-table-column>
            <el-table-column
              :formatter="difficultyFormatter"
              prop="difficulty"
              label="难度">
            </el-table-column>
            <el-table-column
              prop="creator"
              width="150px"
              label="录入人">
            </el-table-column>
            <el-table-column
              :formatter="chkStateFormatter"
              prop="chkState"
              width="100px"
              label="审核状态">
            </el-table-column>
            <el-table-column
              prop="chkRemarks"
              width="200px"
              label="审核意见">
            </el-table-column>
            <el-table-column
              prop="chkUser"
              width="100px"
              label="审核人">
            </el-table-column>
            <el-table-column
              :formatter="publishStateFormatter"
              prop="publishState"
              width="100px"
              label="发布状态">
            </el-table-column>
            <el-table-column
              fixed="right"
              label="操作"
              width="240">
              <template slot-scope="scope">
                <el-button  @click="handleClick(scope.row,'预览')" type="text" size="small">预览</el-button>
                <el-button @click="handleClick(scope.row,'审核')" :disabled="scope.row.chkState != 0" type="text" size="small">审核</el-button>
                <el-button @click="handleClick(scope.row,'修改')" :disabled="scope.row.publishState !== 1" type="text" size="small">修改</el-button>
                <el-button @click="handleClick(scope.row, scope.row.publishState?'上架':'下架')" type="text" size="small">{{scope.row.publishState?'上架':'下架'}}</el-button>
                <el-button @click="handleClick(scope.row,'删除')" :disabled="scope.row.publishState === 0" type="text" size="small">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <div class="flr">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page.sync="form.page"
              :page-sizes="[3, 5, 10, 15]"
              :page-size="form.pagesize"
              layout="prev, pager, next, sizes, jumper"
              :total="total">
            </el-pagination>
          </div>
        </template>
      </el-card>
    </div>
    <questions-check ref="questions-check"/>
    <questions-preview ref="questions-preview" />
  </div>
</template>

<script>
import dayjs from 'dayjs'
// 导入封装的组件
import PageTools from '../components/PageTools.vue'
import QuestionsPreview from '../components/questions-preview.vue'
import QuestionsCheck from '../components/questions-check.vue'
import CompanysSearch from './companys/companys-search.vue'
import { choice, choicePublish, remove } from '@/api/hmmm/questions'
export default {
  components: { CompanysSearch, PageTools, QuestionsCheck, QuestionsPreview },
  data () {
    return {
      form: {
        page: 1, // 1 当前页数
        pagesize: 5, // 5 页尺寸
        subjectID: '', // 学科 *
        difficulty: '', // 难度 *
        questionType: '', // 试题类型 *
        tags: '', // 标签名称 *
        province: '', // 企业所在地省份 *
        city: '', // 企业所在城市 *
        keyword: '', // 关键字 *
        remarks: '', // 题目备注 *
        shortName: '', // 企业简称 *
        direction: '', // 方向 *
        creatorID: '', // 录入人 *
        catalogID: '', // 目录
        chkState: ''// 审核状态
      },
      activeName: 'first',
      questionsData: [],
      total: 0
    }
  },
  created () {
    this.getQuestionList()
  },
  methods: {
    lo (scope) {
      console.log(scope)
    },
    submitData (data) {
      console.log(data)
      this.form = { ...this.form, ...data }
      this.getQuestionList()
    },
    handleSizeChange (val) {
      this.form.page = 1
      this.form.pagesize = val
      this.getQuestionList()
    },
    handleCurrentChange (val) {
      this.form.page = val
      this.getQuestionList()
      if (!this.questionsData) {
        this.form.page = 1
        this.getQuestionList()
      }
    },
    handleClickTab (row) {
      if (row.label === '全部') {
        this.form.chkState = ''
      } else if (row.label === '待审核') {
        this.form.chkState = 0
      } else if (row.label === '已审核') {
        this.form.chkState = 1
      } else if (row.label === '已拒绝') {
        this.form.chkState = 2
      }
      this.getQuestionList()
    },
    handleClick (row, operation) {
      // console.log(row)
      if (operation === '预览') {
        // console.log('预览')
        this.$refs['questions-preview'].dialogVisible = true
        this.$refs['questions-preview'].form.id = row.id
        this.$refs['questions-preview'].questionDetail()
      } else if (operation === '审核') {
        // console.log('审核')
        this.$refs['questions-check'].dialogVisible = true
        this.$refs['questions-check'].form.id = row.id
      } else if (operation === '修改') {
        this.$router.push('/questions/new?id=' + row.id)
      } else if (operation === '上架') {
        this.$confirm('确定要上架么?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          await choicePublish({ id: row.id, publishState: 0 })
          this.$message({
            type: 'success',
            message: '上架成功!'
          })
          this.getQuestionList()
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          })
        })
      } else if (operation === '下架') {
        this.$confirm('确定要下架么?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          await choicePublish({ id: row.id, publishState: 1 })
          this.$message({
            type: 'success',
            message: '下架成功!'
          })
          this.getQuestionList()
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          })
        })
      } else if (operation === '删除') {
        this.$confirm('确定要删除么?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          await remove(row)
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          this.getQuestionList()
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      }
    },
    processData (data) {
      const obj = {}
      if (data.chkState === 0) {
        obj.chkState = 0
      }
      for (const key in data) {
        if (data[key]) {
          obj[key] = data[key]
        }
      }
      return obj
    },
    async getQuestionList () {
      const { data } = await choice(this.processData(this.form))
      this.total = data.counts
      this.questionsData = data.items
    },
    questionTypeFormatter (row) {
      if (row.questionType === '1') return '单选'
      if (row.questionType === '2') return '多选'
      if (row.questionType === '3') return '简答'
      return ''
    },
    questionFormatter (row) {
      const regex = /(<([^>]+)>)/ig
      return row.question.replace(regex, '')
    },
    addDateFormatter (row) {
      return dayjs(row.addDate).format('YYYY-MM-DD HH:mm:ss')
    },
    difficultyFormatter (row) {
      if (row.difficulty === '1') return '简单'
      if (row.difficulty === '2') return '一般'
      if (row.difficulty === '3') return '困难'
      return ''
    },
    chkStateFormatter (row) {
      if (row.chkState === 0) return '待审核'
      if (row.chkState === 1) return '已审核'
      if (row.chkState === 2) return '已拒绝'
      return ''
    },
    publishStateFormatter (row) {
      if (row.publishState === 0) return '上架'
      if (row.publishState === 1) return '下架'
      return ''
    }
  }
}
</script>

<style lang="scss" scoped>
  .flr {
    float: right;
    margin: 20px 30px;
  }
</style>
